<template>
  <view class="order-pay-page">
    <view class="pay-title border-top">
      <text
        class="font-32"
        style="color: #666666;"
      >订单名称：{{charge}}元账号充值</text>
      <text style="color: #F75F45;font-size: 48upx;">¥{{charge}}</text>
    </view>
    <sun-divider></sun-divider>
    <view
      style="width: 720upx;padding-left: 30upx;"
      class="d-flex flex-column link-module"
    >
      <view
        class="d-flex a-center border-bottom font-32"
        style="height: 100upx;font-weight: bold;"
      >
        <text>选择支付方式</text>
      </view>
      <view
        v-for="(item,index) in linkList"
        :key="index"
        class="pay-item"
      >
        <view class="left">
          <text
            class="iconfont mr-2"
            :class="item.methodIcon"
            style="color: #007AFF;font-size: 50upx;"
          ></text>
          <text>{{item.text}}</text>
        </view>
        <view
          @tap="selectPayMethod(index)"
          class="right"
        >
          <view
            :class="item.checkIcon"
            class="iconfont"
          ></view>
        </view>
      </view>
    </view>
    <view
      class="pay-btn"
      @tap="confirmToPay"
    >
      <text>确认支付</text>
    </view>
  </view>
</template>

<script>
import sunDivider from '@/components/common/sun-divider.vue';
import api from '@/common/lib/request.js';

export default {
  data() {
    return {
      token: '',
      contentId: null,
      charge: 0.0,
      currentPayMethod: 0,
      linkList: [{
        "methodIcon": 'icon-zhifubaozhifu',
        "text": '支付宝支付',
        "checkIcon": 'icon-radio'
      },
      {
        "methodIcon": 'icon-weixinzhifu-',
        "text": '微信支付',
        "checkIcon": 'icon-radio'
      },
      {
        "methodIcon": 'icon-yinhangqiazhifu',
        "text": '银联支付',
        "checkIcon": 'icon-radio'
      },
      ]
    };
  },
  onLoad: function (options) {
    this.token = uni.getStorageSync('token');
    this.contentId = options.id;
    this.charge = options.charge;
  },
  components: {
    sunDivider
  },
  methods: {
    // 选取支付方式
    selectPayMethod(idx) {
      this.currentPayMethod = idx + 1;
      this.linkList = this.linkList.map((item, index) => {
        item.checkIcon = idx == index ? 'icon-radioactive' : 'icon-radio'
        return item
      })
    },
    // 确认支付
    confirmToPay() {
      let type = this.currentPayMethod;
      console.log(type);
      if (!type) {
        uni.showToast({
          title: '请选择支付方式',
          duration: 2000
        });
        return;
      }
      let data = {
        token: this.token,
        contentId: this.contentId,
        type: type
      }
      console.log(data)
      // this.$show()
      // this.$api.POST('api/front/content/appPay.jspx', data).then(res => {
      //   console.log(res)
      //   this.$hide()
      //   if (type == 1) {
      //     this.aliPay(res)
      //   } else if (type = 2) {
      //     this.wechatPay(res)
      //   }
      // }).catch(err => {
      //   this.$showToast(err.toString())
      // })
      api.request({
        method: 'POST',
        coverUrl: 'http://www.creb.com.cn/api/front/content/appPay.jspx',
        data: data
      })
        .then(response => {
          console.log(response);
          if (type == 1) {
            this.aliPay(response);
          } else if (type = 2) {
            this.wechatPay(response);
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    aliPay(orderInfo) {
      let self = this
      uni.requestPayment({
        provider: 'alipay',
        orderInfo: orderInfo,
        success: function (res) {
          uni.showToast({
            title: '支付成功',
            duration: 2000
          });
          console.log('success:' + JSON.stringify(res))
          // 支付成功，通知后台
          self.checkReceipt()
        },
        fail: function (err) {
          uni.showToast({
            title: '支付失败',
            duration: 2000
          })
          console.log('fail:' + JSON.stringify(err));
        }
      })
    },
    wechatPay(res) {
      let self = this
      let orderInfo = {
        appid: res.appId,
        noncestr: res.nonceStr,
        package: 'Sign=WXPay',
        partnerid: '1536451631',
        prepayid: res.prepay_id,
        timestamp: res.timeStamp,
        sign: res.sign
      };
      uni.requestPayment({
        provider: 'wxpay',
        orderInfo: JSON.stringify(orderInfo),
        success: function (res) {
          uni.showToast({
            title: '支付成功',
            duration: 2000
          });
          self.checkReceipt()
        },
        fail: function (err) {
          uni.showToast({
            title: '支付失败',
            duration: 2000
          });
          console.log('fail:' + JSON.stringify(err));
        }
      });
    },
    // 通知后台IAP支付成功
    checkReceipt() {
      this.$show('正在确认...')
      var url = `/content/payment?contentId=${this.contentId}&token=${this.token}`
      console.log('request url', url)
      api.request({
        url: url,
        data: {
        }
      })
        .then(response => {
          console.log('支付成功', response)
          this.$showToast('支付成功', 'success')
          uni.navigateBack()
        })
        .catch(err => {
          console.error('支付失败', err)
          this.$showToast('支付失败')
        })
    },
  }
}
</script>

<style lang="scss">
.order-pay-page {
  background-color: #f2f2f2;
  height: 100%;
  .pay-title {
    display: flex;
    flex-direction: column;
    width: 684upx;
    padding: 70upx 32upx;
    height: 105upx;
    background-color: #ffffff;
  }
  .link-module {
    background-color: #ffffff;
    .pay-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 120upx;
      font-size: 32upx;
      border-bottom: 1upx solid #eaeaea;
      .left {
        display: flex;
        align-items: center;
        .icon-zhifubaozhifu {
          color: #007aff !important;
        }
        .icon-weixinzhifu- {
          color: #40ba49 !important;
        }
        .icon-yinhangqiazhifu {
          color: #ff9f38 !important;
        }
      }
      .right {
        margin-right: 30upx;
        .icon-radioactive {
          color: #32b842 !important;
          font-size: 40upx !important;
        }
        .icon-radio {
          color: #cecece !important;
          font-size: 40upx !important;
        }
      }
    }
  }
  .pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690upx;
    height: 86upx;
    background: #f75f45;
    border-radius: 5px;
    margin: 94upx 30upx 0;
    font-size: 34upx;
    color: white;
  }
}
</style>
